微信高级排版——CSS盒模型
职场
学术
新媒体
设计
极客
菜鸟运营人，只能通过第三方编辑器堆砌微信图文样式；而运营高手往往能娴熟地书写CSS来优化文本视觉体验。
什么是CSS？对于才刚刚接触H5（HTML5）的小白而言，你可以认为 CSS3（第三代CSS）之于HTML5就好比皮囊之于骨肉，起到对框架内容具体的填充与表达作用。
请把微信或者任何HTML5页面想象成从上往下堆叠的盒子，因而有如下这张教科书图示，每个盒子包含四层▼
- margin
- border
- padding
- content
width
CSS中的「宽度」一般指盒子模型中 Content 的宽度，如果你使用百分比宽度，那么百分比也是相对父容器/块的 Content 而言。当然前提是该父容器/块本身的宽度并不依赖于它。
padding
内边距。这里请注意参数的书写方法▼
padding:10px 5px 15px 20px
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px
padding:10px 5px 15px;
上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px
padding:10px 5px;
上内边距和下内边距是 10px
右内边距和左内边距是 5px
padding:10px;
所有 4 个内边距都是 10px
margin
外边距；注意相邻的两个盒子的 Margin 会重叠，而且 Margin 也可以为负——这也是微信图文里把字写在图片上的常见套路。
box-sizing
属性可以为三个值之一：
content-box（默认）
border-box
padding-box
- content-box：border 和 padding 不计算入 width 之内
- padding-box：padding 计算入 width 内
- border-box：border 和 padding 计算入 width 之内
overflow
溢出控制；常用值有visible、hidden、scroll、auto。其中 scroll 是微信图文中经常应用的滚动效果，比如 JZ 这里做一个小手机页面，里面包含了几个JZ系的子号▼
JZplus
block-level
块级元素。每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行；元素的高度、宽度、行高和顶底边距都是可以设置的；如果不设置宽度，那么就默认为父容器/块的宽度。常见的块级元素有▼
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
inline-level
行级元素。可以和其他元素处于一行，不用必须另起一行；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字、图片的宽度，不可改变。
块级元素中的子元素
块级元素可以包含多个子块级元素也可以包含多个行级元素。块级元素中不能同时包含块级和行级元素。
两个兄弟盒子之间的距离由 margin 属性决定。
行级元素中的子元素
行级元素内可以包含行级元素。行级元素包含块级元素时，会被块级拆成两个行级元素。
盒之间的水平 margin，border 和 padding 都有效。当一个行盒放不下上下文内所有盒子时，会被分到多个垂直折叠的行盒内行盒内的水平分布由 text-align 决定
float
浮动。块级元素一定不能出现在同一行吗？未必。比如我们以前公众号“JZ 多媒体解决方案”顶部的分栏样式采用的是 table，由于被 36氪 等公众号广泛抄袭，现在采用了区块级的 section 加 float 属性来实现分栏，每个栏宽 20% 即可。
所以，浮动元素就是从常规中脱离，可漂浮在容器(包含块)的左边或者右边并依次排列。
Display 属性
block 生成块级盒；inline 生成行级盒；inline-block 生成行级盒，为其内容生成块级盒；none 在排版时将元素忽略。
我们去年通过讲座形式走访了很多大学。鉴于仍有不少高校组织希望申请，特此我们开启第3轮「新媒体运营与HTML5设计」巡讲活动。其中第1轮报名参与的高校组织（党/团委、学生会、社团等）包括▼
第2轮报名参与的高校组织（党/团委、学生会、社团等）包括▼
另外，我们今年正在和部分大学和高中开展专业课、选修课合作，有希望了解的校方教务工作的老师也欢迎和我们联系。
讲课老师介绍
计育韬
上海市金山区青联副主席
上海团市委新媒体顾问
微信官方 SVG AttributeName 开发者
新榜 500 强运营人
复旦大学青年智库讲师
浙江传媒学院客座导师
● ● ●
共青团中央都入驻B站了，计老师想了想，还是考虑放下手中的工作走进高校。一方面，我们仍然会为大家解读顶尖新媒体商业案例；另一方面，也为党政团务的新媒体工作提供创新思路。
这一轮的讲座内容会有较之以往有调整，目前安排如下▼
1.社会化营销的借鉴意义
23个粉丝，也能 10W＋？7天时间，可以暴增120W粉丝？把视线投向社会，商业奇迹如何引入高校？党政工作，如何不再自嗨？讲座中将举例分析。
2.商业文案的养成方法
标题、正文、语法、配图、排版……专业级账号的运营包含哪些不为人知的文案策略？讲座中将展现由我们托管运营的高端品牌账号后台案例。
3.HTML5 与小程序
软文＋KOL＋H5 三板斧，技术就行如何系统化习得？什么是小程序，我们是否有绝对的必要参与？经典 HTML5 移动营销案例背后有哪些不同技术支撑？讲座中将为大家打开视野。
4.流量变现与就业前行分析
青年人的个人微信号，如何实现有效变现？基于新媒体的创业真的靠谱吗？行业薪酬水平如何？实习、就业过程中应注意哪些面试策略、技能准备和岗位判断？讲座中我们将重点阐述行业就业相关问题。
我们将沿袭前两轮全国巡讲的合作模式，欢迎高校组织自主联系我们。高校类型不限，组织类型不限，但留言时记得介绍组织情况并留下确切联系方式。参与听讲的大学生无需支付任何培训费用，全部校园组织方平均分摊主讲人的高铁/动车票和住宿即可，主办方请勿以其他形式向听课学生收取费用。
巡讲时间为2017年春季学期。
● ● ●
本轮巡讲仍将采用受到以往各校方一致认可的公益摊派方式，听众无需支付任何成本，高校组织方全体平摊巡讲人交通费用（高铁 or 动车二等座，部分路段可能为T字头列车硬卧），另同地区高校分摊所在地的食宿费用，可接受学校宿舍住宿。
各项开支如车票等将进行公示，根据各地具体情况，校方支出费用预计在 300-600 元之间。实际情况以接洽安排后为准。
● ● ●
根据之前巡讲安排的经验，通常在截止日前会收到约 60 所大学或校园组织参与合作申请。最终我们将根据可行性评估，如各校的讲座安排进度、学校组织规模和执行经验、新媒体平台能力等，确定约 25 所最终巡讲高校。
目前已有约 15 所高校报名第三轮巡讲。
合作申请从即日起即可向我们提出，到达 60 所大学后截止。
● ● ●
1.有意愿承办巡讲站点高校组织负责人可与本微信公众平台（微信号 JZCS0320）私信联系，初步介绍学生组织情况。
2.初步接洽后，负责人将加入本次公益巡讲联络人微信群。
3.各高校负责人统一填写资料汇总表，确保我们能通过手机、QQ、微信、邮箱等多种方式与大家联络。期间我们将通过邮件往来的邮件书写规范性和组织介绍筛选出能力充分的合作方。
4.路程规划 V1.0 版公布（精确到日期）；合作协议书 V1.0 版公布（经费部分留白）
5.与各高校负责人再次确认意向后进行路程经费计算，发布相关 EXCEL 表格进行公示。
6.合作协议书填写入经费部分，发送给各高校进行签署和回传。
7.宣传片制作（或可能是超级 H5 作品，作品中将呈现各高校名单，暑假末期将推出）。上一期由我们设计的作品宣传作品如下▼
https://v.qq.com/txp/iframe/player.html?vid=f0333dr9zzt&width=500&height=375&auto=0
8.各高校走行政申请流程，完成教室审批，确定最终时间和场地。
9.巡讲开始。
回复排版学习从入门到高阶的方法
回复标题深度掌握文案标题的策略
回复原创知晓原创标签的获取方法
| JZ 往期商业伙伴 |
APEC 峰会 | 中国航天集团 | 浙江省人民广播电台 | 湖北省电视台
河南卫视 | 交通银行 | 建设银行 | 平安银行 | 民生银行 | 真格基金
南方周末 | 上海闵行教育学院 | 上海创智云课堂 | 新东方集团
伟巴斯特 | 雪佛兰汽车 | 雷诺汽车 | 观致汽车 | TNS新华信
高力国际｜第一太平戴维斯｜德国莱茵｜盖茨基金会｜追星集团
H5／平面／视频／多媒体服务与定制
（021）3721 8818